<template>
  <div class="itemBodys">
    <echarts v-for="(item,index) in list" :key="index"
             :color4="item.color4"
             :color3="item.color3"
             :color1="item.color1"
             :color2="item.color2"
             :percent="item.percentage"
             :value="item.value"
             :name="item.name"></echarts>
  </div>
</template>

<script>
import echarts from "./components/echarts.vue";
// import {workOrderStatistics} from "@/api/api/waterSupplyOverview.js";

export default {
  data() {
    return {
      list: [],
      colorList: ['#14e48a', '#1ec9ff', '#ffbf2f']
    }
  },
  components: {echarts},
  computed: {},
  mounted() {
    // this.getData()
  },
  methods: {
    // 转换十六进制颜色为 RGBA 格式
    hexToRgba(hex, alpha) {
      const [r, g, b] = [parseInt(hex.slice(1, 3), 16), parseInt(hex.slice(3, 5), 16), parseInt(hex.slice(5, 7), 16)];
      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    },
    async getData() {
      try {
        const res = await workOrderStatistics();
        let data = res.data;
        // 首先计算所有 value 的总和
        const totalValue = data.reduce((sum, item) => sum + item.value, 0);
        // 然后将百分比字段添加到每个元素
        const result = data.map((item, index) => ({
          ...item,
          percentage: ((item.value / totalValue) * 100).toFixed(0),
          color1: this.hexToRgba(this.colorList[index], 0.5),
          color2: this.hexToRgba(this.colorList[index], 1),
          color3: this.hexToRgba(this.colorList[index], 0.8),
          color4: this.hexToRgba(this.colorList[index], 0.3),
        }));

        this.list = result
      } catch (err) {
        console.error(err);
      }
    },
  },
  filters: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
.itemBodys {
  width: 100%;
  position: relative;
  height: (100%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}

.echartsBody {
  position: relative;
  width: 100%;
  height: calc(100% - 0px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}
</style>
